import {mavonEditor} from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

export let data =
  {
    name: 'ArticleAdd',
    components: {
      mavonEditor
    },
    data () {
      return {
        articleInfo: {
          title: '',
          subject: '',
          subjectHtml: '',
          content: '',
          contentHtml: '',
          status: 2,
          type: this.$route.query.type || 0,
          id: this.$route.query.id || '',
          developLanguageId: ''
        },
        typeName: '文章',
        toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: false, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          htmlcode: true, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: false, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: true, // 导航目录
          /* 2.1.8 */
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          /* 2.2.1 */
          subfield: true, // 单双栏模式
          preview: true, // 预览
        },
        exam: {
          disable: false,
          type: -1,
          status: 1,
          types: []
        },
        developLan: {
          type: '',
          list: []
        }
      }
    },
    methods: {
      initData: function () {
        this.$api.dict.findListCate({status: 1, str: 'lan'}).then((res) => {
          if(res.isSuccess === true){
            this.developLan.list = res.body;
          }
        })
        this.$api.dict.findListCate({status: 1, str: 'resourcetype'}).then((res) => {
          if (res.isSuccess === true) {
            this.exam.types = res.body

            if (this.articleInfo.id) {
              this.exam.types.forEach((item) => {
                if (item.code == this.articleInfo.type) {
                  this.exam.type = item.code + ''
                  this.typeName = item.name
                  return
                }
              })
              this.exam.disable = true
              this.$api.article.detail({unique: this.articleInfo.id}).then((res) => {
                if (res.isSuccess && res.body) {
                  let data = res.body
                  this.articleInfo.id = data.id
                  this.articleInfo.title = data.title
                  this.articleInfo.content = data.content
                  this.articleInfo.subject = data.subject
                  this.articleInfo.developLanguageId = data.developLanguageId
                }
              })
            } else {
              this.exam.type = '0'
            }
          }
        })
      },
      save: function (data) {
        if (!this.articleInfo.title) {
          this.$message.error('请输入标题')
          return
        }
        if (!this.articleInfo.content) {
          this.$message.error('请输入内容')
          return
        }
        this.articleInfo.type = this.exam.type
        this.articleInfo.developLanguageId = this.developLan.type
        this.$api.article.save(this.articleInfo).then((res) => {
          if (res.isSuccess) {
            this.$message.success('操作成功')
            if (data != null && data.callback) {
              data.callback()
            }
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      saveMavon: function () {
        this.articleInfo.status = 2
        this.save()
      },
      saveAndClear: function () {
        let cb = res => {
          this.clearData()
        }
        this.save({callback: cb})
        this.exam.disable = false
      },
      commit: function () {
        this.articleInfo.status = 1
        this.save()
      },
      clearData: function () {
        this.articleInfo.title = ''
        this.articleInfo.id = ''
        this.articleInfo.content = ''
        this.articleInfo.subject = data.subject
        this.exam.disable = false
        this.developLan.type = ''
      },
      change: function (str, idx) {
        this.exam.types.forEach((item) => {
          if (item.code == str) {
            this.typeName = item.name
            return
          }
        })
      },
      // 绑定@imgAdd event
      $imgAdd (pos, $file) {
        // 第一步.将图片上传到服务器.
        var formdata = new FormData()
        formdata.append('image', $file)
        this.$message.warning('暂未对接上传图片，可手动添加图片链接')
        return
        axios({
          url: 'server url',
          method: 'post',
          data: formdata,
          headers: {'Content-Type': 'multipart/form-data'},
        }).then((url) => {
          // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
          /**
           * $vm 指为mavonEditor实例，可以通过如下两种方式获取
           * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
           * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
           */
          $vm.$img2Url(pos, url)
        })
      },
      changeData (value, render) {
        this.articleInfo.contentHtml = render
      },
      changeSubject (value, render) {
        this.articleInfo.subjectHtml = render
      }
    },
    mounted () {
      this.initData()
    }
  }
